<template>
  <view class="lotterydetail">
    <view class="opcity1"></view>
    <view class="opcity2"></view>
    <view class="contentbox">
      <view class="menu" @click="itemClick()">
        <image :src="recipes.picture" mode=""></image>
        <view class="name">
          {{ recipes.name }}
        </view>
        <view class="metiral">
          {{recipes.description}}
        </view>
      </view>
      <view class="lottery_box">
        <button class="button" @click="addToCart">
          加入菜篮子
        </button>

        <button class="button" @click="getRandom">
          换一个
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import uniIcons from "@/components/uni/uni-icons/uni-icons.vue"

import {
  mapState,
  mapMutations,
} from 'vuex';
import {cookbookList} from "@/api/ap_cookbook";
import {user_join} from "@/api/user_cart";

export default {
  data() {
    return {
      id: "",
      lotteryDetailMenu: {},
      material: [],
      menu: [],
      recipes: {},
      flag: true
    };
  },
  components: {
    uniIcons
  },
  onLoad(option) {
    this.getMenu()
  },
  computed: {
    ...mapState({
      menus: "menus"
    })
  },
  methods: {
    ...mapMutations({
      addToMenus: 'addToMenus'
    }),

    getRandom() {
      const len = this.menu.length;
      this.recipes = this.menu[Math.floor(Math.random() * len)];
      console.log(this.recipes)
    },

    getMenu() {
      cookbookList({}).then(res => {
        this.menu = res.data;
        this.getRandom()
      })

    },
    addToCart(){
      let params = {}
      params.type = 1;
      params.foodId =this.recipes.foodId
      user_join(params).then(res => {
        if (res.code === '200') {
          uni.showToast({
            title: '加入成功',
            icon: 'none'
          })
        }
      })
    },

    itemClick() {
      uni.navigateTo({
        url: '/pages/fooddetail/fooddetail?foodId=' + this.recipes.foodId
      })
    }
  }
}
</script>

<style lang="scss">
page {
  height: 100%;
  width: 100%;
}

.lotterydetail {
  background-color: #eeeded;
  height: 100%;

  .opcity1 {
    width: 540rpx;
    height: 1204rpx;
    background-color: rgba($color: #fff, $alpha: 0.5);
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -600rpx;
    margin-left: -270rpx;
    box-shadow: 5rpx 5rpx 5rpx 5rpx #dbd8d8;
    border-radius: 16rpx;
  }

  .opcity2 {
    width: 600rpx;
    height: 1124rpx;
    background-color: rgba($color: #f5f4f4, $alpha: 0.6);
    z-index: 99;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -560rpx;
    margin-left: -300rpx;
    box-shadow: 5rpx 5rpx 5rpx 5rpx #dbd8d8;
    border-radius: 16rpx;
  }

  .contentbox {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -520rpx;
    margin-left: -350rpx;
    z-index: 999;
    width: 700rpx;
    height: 1040rpx;
    border-radius: 16rpx;
    background-color: #fff;
    box-shadow: 10rpx 10rpx 5rpx 5rpx #dbd8d8;

    .menu {
      text-align: center;
      height: 780rpx;

      image {
        background-size: cover;
        margin: 32upx;
        width: 90%;
        height: 500rpx;
        border-radius: 16rpx;
      }

      .name {
        margin-top: 20rpx;
        font-size: 38rpx;
      }

      .metiral {
        margin-top: 20rpx;
        line-height: 40upx;
        padding-left: 20upx;
        max-height: 200upx;
        overflow: auto;
        padding-right: 20upx;
        color: #333;
        font-size: 24rpx;
      }
    }

    .lottery_box {
      display: flex;
      position: absolute;
      right: 40upx;
      bottom: 40upx;
      gap: 30upx;
      .button {
        text-align: center;
        background-color: #FFA200;
        color: #fff;
      }
    }

  }
}
</style>
